<template>
    <div class="head">
        <MyHead title="登录" :isrigth="false"></MyHead>
    </div>

    <div class="difault">

        <VanTabs v-model:active="active">
            <VanTab title="账号登录">
                <div class="PromptText">欢迎使用账号登录</div>
                <VanForm @submit="onSubmit" ref="loginFrom">
                    <VanCellGroup inset>
                        <VanField v-model="params.username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ pattern: /[\w]{6,20}$/, message: '请填写正确的用户名' }]" />
                        <template class="pwdtemplate">
                            <VanField v-model="params.password" :type="iseys ? 'text' : 'password'" name="密码" label="密码"
                                placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]">
                            </VanField>
                            <div class="eyes" @click="ispwdeyes">
                                <span v-show="iseys"><i class="iconfont icon-yanjing"></i></span>
                                <span v-show="!iseys"><i class="iconfont icon-bukejian"></i></span>
                            </div>
                        </template>
                    </VanCellGroup>
                    <div class="Forgot-password PromptText" @click="gotopushwhere('/ForgotPassword')">忘记密码?</div>
                </VanForm>

            </VanTab>
            <VanTab title="手机号登录">
                <div class="PromptText">欢迎使用手机号登录</div>
                <VanForm @submit="onSubmittel">
                    <VanCellGroup inset>
                        <VanField v-model="params.tel" name="手机号" label="手机号" placeholder="手机号"
                            :rules="[{ pattern: /^[1][3-9][0-9]{9}$/, message: '请填写正确的手机号' }]" />
                        <VanField v-model="params.sms" type="number" center clearable label="短信验证码" placeholder="请输入短信验证码"
                            :rules="[{ required: true, message: '请填写验证码' }]">
                            <template #button>
                                <VanButton size="small" type="primary">发送验证码</VanButton>
                            </template>
                        </VanField>
                    </VanCellGroup>
                </VanForm>
            </VanTab>
            <div style="margin: 16px;">
                <VanButton round block type="primary" @click="WaitForLogin">
                    登录
                </VanButton>
                <VanButton class="registerbtn" round block type="primary" @click="gotopushwhere('/register')">
                    注册
                </VanButton>
            </div>
        </VanTabs>

    </div>
    <div class="footer">
        <MyFooter :isFooter="false"></MyFooter>
    </div>
</template>

<script setup>
import { useCommon } from '../../hooks/Common';
import { ref, reactive } from 'vue';
import { loginAPI } from '../../api/loginapi';
import { showSuccessToast,showFailToast } from 'vant';
import {useRoute} from "vue-router"
import {GoodStore} from "../../stores/user"
let route=useRoute();
let goodstore=GoodStore();

let { gotopushwhere,gotoreplacewhere } = useCommon();

let loginFrom = ref()

let active = ref(0)

let iseys = ref(false)

let params = reactive({
    username: '',
    password: '',
    tel: '',
    kety: '',
})

const ispwdeyes = () => {
    iseys.value = !iseys.value;
}

let WaitForLogin = async () => {

    let res='';

        if (active.value == 0) {
            res = await loginAPI({
                username:params.username,
                password:params.password
            })
        }else{
             res =  await loginAPI({
                phone:params.tel,
            })
        }
        if(res.data.code==200){
            showSuccessToast(res.data.msg);
            goodstore.setToken(res.data.token);
            goodstore.setusername(res.data.result.username)
            if(route.query.ReturnURL){
                gotoreplacewhere(decodeURIComponent(route.query.ReturnURL))
            }else{
                gotoreplacewhere('/home')
            }
            
        }else{
            showFailToast(res.data.msg)
        }
        console.log(res);

   
}


</script>





<style lang="scss" scoped>
.difault {
    padding: 0 .3rem;
}

.resg {
    background: #fff;
    color: #000;
    margin-top: .2rem;
}

;

.PromptText {
    font-size: .3rem;
    margin: .3rem 0 .1rem .3rem;
    color: #777;
}

;

.registerbtn {
    margin-top: .2rem;
    background: #fff;
    color: #000;
}

;

.Forgot-password {
    font-size: 0.2rem;
}

;

.pwdtemplate {
    display: flex;
}

;

.pwdtemplate .eyes {
    margin-top: .3rem;
}

;
</style>